<template>
    <div>
        <div class="right-wrapper content-lianxi-tiaomu">
            <div class="page-titles">
                <div class="row">
                    <div class="header-crumb">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/mytest' }">我的练习</el-breadcrumb-item>
                            <el-breadcrumb-item>{{simulib.title}} - 答题报告</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>
            </div>
            <div class="quickTest-toolbar">
                <ul class="nav">
                    <!--<li class="nav-item">-->
                    <!--<div class="nav-date">-->
                    <!--<i class="fa fa-clock-o" aria-hidden="true"></i>-->
                    <!--<span>{{time_cost}}</span>-->
                    <!--</div>-->
                    <!--</li>-->
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)" @click="showError()">
                            <button type="button" class="btn btn-outline-danger btn-block" v-show="showall"><i class="fa fa-eye"></i>只看错题</button>
                            <button type="button" class="btn btn-outline-success btn-block" v-show="!showall"><i class="fa fa-eye"></i>查看所有</button>
                            <!--<button type="button" class="btn btn-outline-success btn-block" v-if="!timeout" ><i class="fa fa-play">重启</i></button>-->
                        </a>
                    </li>
                    <!--<li class="nav-item">-->
                    <!--<a class="nav-link" href="javascript:void(0)">-->
                    <!--<button type="button" class="btn btn-outline-danger btn-block" @click="showDt()"><i class="fa fa-list-ol"></i>答题卡</button>-->
                    <!--</a>-->
                    <!--</li>-->
                    <!--<li class="nav-item">-->
                    <!--<a class="nav-link" href="#">-->
                    <!--<button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-check-square-o" aria-hidden="true"></i>交卷</button>-->
                    <!--</a>-->
                    <!--</li>-->
                    <!--<li class="nav-item">-->
                    <!--<a class="nav-link" href="#">-->
                    <!--<button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-heart"></i>留到下次</button>-->
                    <!--</a>-->
                    <!--</li>-->
                </ul>
            </div>
            <div class="container-fluid">
                <div class="row" v-loading="loading">
                    <el-tabs v-model="activeTab" class="col-md-12">
                        <el-tab-pane :label="pi.Title+'('+pi.Amount+')'" v-for="(pi,pk) in section" :key="pi.Id" :name="pi.Id+''">
                            <div  v-for="(item,ik) in list[pi.Id]" :id="'item_'+item.id" v-if="pi.LibType == 0">
                                <div :class="{'card':true,'item-correct':item.is_answer_right=='1'}">
                                    <div class="card-body">
                                        <span class="tiaomu-title pull-left">{{item.ordering}}. &nbsp;【单选】&nbsp;</span>
                                        <p v-html="item.body"></p>
                                        <div class="question-options question-options-8062">
                                            <div class="options-item" :class="{'options-incorrect':aclass[answer.Id] && (answer.IsRightAnswer != '1'),'':!aclass[answer.Id],'options-correct':answer.IsRightAnswer == '1'}" v-for="(answer,ak) in item.answer_data" >
                                                <span class="options-no"> {{String.fromCharCode(ak + 1 + 64)}}</span>
                                                <span class="options-p" v-html="answer.Body"> </span>
                                            </div>
                                            <div class="options-item">
                                                <span class="options-no">解</span>
                                                <span class="options-p" v-html="item.analysis"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="pi.LibType == 1">
                                <div  v-for="(item,ik) in resources">
                                    <div>
                                        <p v-html="item.body"></p>
                                    </div>
                                    <div v-for="(item2,ik2) in resourceData[item.id]" :id="'item_'+item2.id">
                                        <div :class="{'card':true,'item-correct':item.is_answer_right=='1'}">
                                            <div class="card-body">
                                                <span class="tiaomu-title pull-left">{{item2.ordering}}. &nbsp;【单选】&nbsp;</span>
                                                <p v-html="item2.body"></p>
                                                <div class="question-options question-options-8062">
                                                    <div class="options-item" :class="{'options-incorrect':aclass[answer.Id] && (answer.IsRightAnswer != '1'),'':!aclass[answer.Id],'options-correct':answer.IsRightAnswer == '1'}" v-for="(answer,ak) in item2.answer_data">
                                                        <span class="options-no"> {{String.fromCharCode(ak + 1 + 64)}}</span>
                                                        <span class="options-p" v-html="answer.Body"> </span>
                                                    </div>
                                                    <div class="options-item">
                                                        <span class="options-no">解</span>
                                                        <span class="options-p" v-html="item.analysis"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <div class="popup-quickTest" v-show="dtshow">
            <div class="row" id="answer-card">
                <span :class="{'ac-question':true,'active':item.is_answered == 1 , 'num-split' : !((ik+1)%5)}" v-for="(item,ik) in rows" @click="scrollTo(item.tab_category_id,item.id,ik)">{{item.ordering}}</span>
            </div>
        </div>
    </div>
</template>
<script>
    import http from "../../lib/http"
    import jquery from "../../lib/jquery"
    export default {
        data : function(){
            var params = this.$route.path.split("-")
            this.simu_id = params[1]
            return {
                showall : true,
                clock : true,
                rows : [],
                aclass : {},
                time_cost : '',
                last_stop_time : 0,
                upFunc : function(){
                },
                timeout : false,
                loop : false,
                dtshow:false,
                section : [],
                activeTab : 0,
                simulib : {},
                loading : true
            }
        },
        computed : {
            list : function () {
                this.aclass = []
                var sd = {}
                for(var i=0,j=this.rows.length;i<j;i++){
                    var data = this.rows[i]
                    if(typeof data.answer_data == "string" && data.answer_data != "") {
                        console.log(data.answer_data)
                        data.answer_data = JSON.parse(data.answer_data)
                    }
                    console.log(data.answer_choose_data)
                    if(data.answer_choose_data != ""){
                        if(typeof data.answer_choose_data == "string") {
                            data.answer_choose_data = JSON.parse(data.answer_choose_data)
                        }
                        //this.aclass = JSON.parse(JSON.stringify(data.))
                        console.log(typeof data.answer_choose_data)
                        //console.log(data.answer_choose_data)
                        for(var k in data.answer_choose_data){
                            //alert(k)
                            this.aclass[k] = data.answer_choose_data[k]
                        }

                    }
                    sd[this.rows[i].tab_category_id] = sd[this.rows[i].tab_category_id] || []
                    sd[this.rows[i].tab_category_id].push(this.rows[i])
                }
                return sd
            },
            resourceData : function(){
                var sd = {}
                for(var i=0,j=this.rows.length;i<j;i++){
                    sd[this.rows[i]["resource_id"]] = sd[this.rows[i]["resource_id"]] || []
                    sd[this.rows[i]["resource_id"]].push(this.rows[i])
                }
                return sd;
            }
        },
        created : function(){
            var self = this
            http.alive(this,function(){
                http.get(self,"cs_test_libraries/simu/"+self.simu_id).then(function (res) {
                    self.simulib = res.data.data
                    self.last_stop_time = res.data.data.last_stop_time * 1
                    self.time_cost = self.formatSeconds(self.last_stop_time)
                    var user = JSON.parse(localStorage.getItem("userinfo"))
                    http.get(self, "test_category/" + user.PqTestCategoryId).then(function (res) {
                        http.post(self, "test_category/manage/rensection", {p: res.data.data.point_data}).then(function (res) {
                            self.section = res.data
                            self.section.sort(function (v1, v2) {
                                return v1.Ordering < v2.Ordering
                            })
                            console.log(self.section)
                            self.activeTab = res.data[0].Id + ''
                        })
                    })
                    self.list_resource()

                })
                http.get(self,"cs_test_libraries_item/simu/"+self.simu_id).then(function (res) {
                    self.loading = false
                    self.rows = res.data.data
                })
            })

        },
        methods : {
            list_resource : function(){
                var self = this
                http.get(this,"cs_test_libraries_item/"+this.simulib.library_id+"/resource").then(function(res){
                    self.resources = res.data.data
                })
            },
            formatSeconds : function(value) {
                var theTime = parseInt(value);// 秒
                var theTime1 = 0;// 分
                var theTime2 = 0;// 小时
                if(theTime > 60) {
                    theTime1 = parseInt(theTime/60);
                    theTime = parseInt(theTime%60);
                    if(theTime1 > 60) {
                        theTime2 = parseInt(theTime1/60);
                        theTime1 = parseInt(theTime1%60);
                    }
                }
                var result = []
                //if(theTime2 > 0) {
                var hour = parseInt(theTime2)
                result[result.length] = (hour < 10) ? ("0" + hour) : hour
                //}
                //if(theTime1 > 0) {
                var minute = parseInt(theTime1)
                result[result.length] = (minute < 10) ? ("0" + minute) : minute
                // }
                var second = parseInt(theTime)
                result[result.length] = (second < 10) ? ("0" + second) : second
                return result.join("'");
            },
            scrollTo : function(sid,item_id){
                this.activeTab = sid
                setTimeout(function(){
                    var $ = jQuery;
                    var toEl = $("#item_"+item_id)
                    var pos = toEl.offset()
                    //console.log($(document.documentElement))
                    $(document.documentElement).animate({
                        scrollTop: pos.top - 120
                    },800)
                    $(document.body).animate({
                        scrollTop: pos.top - 120
                    },800)
                },300)

            },
            pause : function(){
                clearTimeout(this.timeout)
                this.timeout = null
                this.timeout = false
                clearInterval(this.loop)
                this.loop = null
                this.loop = false
            },
            restart : function(){
                var self = this
                this.upFunc()
                this.loop = setInterval(function(){
                    self.last_stop_time += 1
                    self.time_cost = self.formatSeconds(self.last_stop_time)
                },1000)
            },
            showDt : function(){
                this.dtshow = !this.dtshow
            },
            doAnswer : function(item,answer,sid,k){
                var self = this
                http.post(this,"cs_test_libraries_item/simu/"+item.id,{"idstr":answer.Id}).then(function (res) {
                    //alert(answer.Id)
                    // if(!self.list[k].answer_choose_data.hasOwnProperty(answer.Id)){
                    self.list[sid][k].answer_choose_data = '{"'+answer.Id+'":true}'
                    self.list[sid][k].is_answered = 1
                    // }
                    self.$set(self.aclass,answer.Id,true)
                    if (self.timeout === false){
                        self.restart()
                    }
                    //console.log(JSON.stringify(self.aclass))
                    //self.aclass[answer.Id] = true
                    //alert(JSON.stringify(self.list[k].answer_choose_data))
                })
                self.scrollTo(item.tab_category_id,item.id)
            },
            showError : function(){
                var $ = jQuery
                this.showall = !this.showall
                if( !this.showall) {
                    $(".item-correct").hide()
                }else{
                    $(".item-correct").show()
                }

            }
        }
    }
</script>
<style scoped>
    .num-split{
        margin-right: 20px
    }
    /*.right-wrapper.content-lianxi-tiaomu .container-fluid .card .options-item.options-correct .options-no{*/
    /*border:1px solid #67c23a;*/
    /*background-color:#67c23a;*/
    /*color:#fff;*/
    /*}*/
</style>
